<template>
  <div class="content">
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="keyword" placeholder="请输入用户昵称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getTableInfo">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" row-key="order_id" stripe :border="true">
      <el-table-column prop="user_id" label="ID" fixed="left"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="" label="头像">
        <template #default="scope">
          <el-avatar :src="scope.row.avatarUrl" shape="circle" />
        </template>
      </el-table-column>
      <el-table-column prop="real_name" label="真实姓名" />
      <el-table-column prop="" label="性别">
        <template #default="scope">
          <el-tag v-if="scope.row.gender === 0" type="danger">女</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">男</el-tag>
          <el-tag v-else type="warning">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="country" label="所在国家" />
      <el-table-column prop="province" label="所在省份" />
      <el-table-column prop="city" label="所在城市" />
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column prop="update_time" label="更新时间" />
    </el-table>
    <el-divider border-style="none" />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getUserListApi } from "@/api/babycar";
const total = ref(0);
const curPage = ref(1);
const pageSize = ref(20);
const tableData = ref([]);
const keyword = ref("");

onMounted(() => {
  getTableInfo();
});
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTableInfo();
};
const handleCurrentChange = (val: number) => {
  curPage.value = val;
  getTableInfo();
};
function getTableInfo() {
  getUserListApi({
    page: curPage.value,
    pageSize: pageSize.value,
    keyword: keyword.value,
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
</script>

<style lang="scss">
.common-seach-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-input {
    width: 300px;
  }
}
.el-tabs {
  .el-tabs__new-tab {
    width: auto !important;
  }
}
.table-box {
  height: calc(100% - 200px);
}
</style>
